<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三峡大学计算机与信息学院</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script>
    <style>
        .clearfix {
        clear: both;
        }
        * {
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
        }
        .header {
            background-color: #105999;
            /* background-color: pink; */
            background-position: 0 0;
            margin: 0px;
            /* text-align: center; */
        }
        .header img {
            display: inline-block;
        }
        .nav {
            background-color: #fff;
            text-align: center;
        }
        .nav a {
            text-decoration: none;
            color: #646465;
            /* padding: 15px 22px; */
            display: inline-block;
            width: 110px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            margin: 10px 0px;
        }
        .nav a:hover {
            background-color: #1e61c1;
            color: #fff;
        }
        .container,.foot {
            /* float: left; */
            text-align: center;
            margin: 0 auto;
        }
        .search {
            float: right;
            margin-right: 255px;
            margin-top: 52px;
            display: inline-block;
           /* margin-left: 1170px; */
        }
        .search input {
            height: 32px;
            width: 224px;
            display: inline-block;
            padding: 3px,2px,1px,18px;
        }
        .search button {
            height: 32px;
            width: 48px;
            padding: auto;
        }
        /*.container {
            display: inline-block;
            width: 500px;
            height: 350px;
            overflow: hidden;
            border-radius: 8px;
            text-align: center;
        }
        .loop {
            width: 2500px;
            height: 100%;
        }
        .item {
            width: 500px;
            height: 100%;
        }*/
        .box1 {
            width: 1200px;
            height: 360px;
            margin: 0,auto;
            overflow: hidden;
        }
        .box {
            width: 4000px;
            height: 360px;
            animation: move 20s infinite;
            text-align: center;
        }
        .box2 {
            width: 420px;
            height: 276px;
            margin: 0 auto;
            overflow: hidden;
        }
        .boxx {
            width: 2100px;
            height: 276px;
            animation: move2 20s infinite;
            text-align: center;
        }
        .box img {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @keyframes move {
           
            0% {
            transform: translate(0,0);
            }
            20% {
            transform: translate(0,0);
            }
            45% {
            transform: translate(-1200px,0);
            }
            65% {
            transform: translate(-1200px,0);
            }
            85% {
            transform: translate(-2400px,0);
            }
            100% {
            transform: translate(-2400px,0);
            }
            /* 100% {
            transform: translate(-3600px,0);
            } */
        }
        @keyframes move2 {
            0%{
                transform: translate(0,0);
            }
            10%{
                transform: translate(0,0);
            }
            20%{
                transform: translate(-420px,0);
            }
            30%{
                transform: translate(-420px,0);
            }
            40%{
                transform: translate(-840px,0);
            }
            50%{
                transform: translate(-840px,0);
            }
            60%{
                transform: translate(-1680px,0);
            }
            70%{
                transform: translate(-1680px,0);
            }
            80%{
                transform: translate(-1680px,0);
            }
            90%{
                transform: translate(-1680px,0);
            }
            100%{
                transform: translate(-1680px,0);
            }
        }
        li {
        list-style: none;
        }
        .boxx img {
            float: left;
            height: 276px;
            width: 420px;
        }
        .box img {
            float: left;
            height: 360px;
            width: 1200px;
        }
        .message {
           width: 1196px;
           height: 34px;
            text-align: center;
            margin:  auto;
        }
        .lside {
            margin-left: 258px;
            width: 420px;
            height: 276px;
            float: left;
            margin-right: 20px;
        }
        .rside {
            width: 274px;
            height: 62px;
            float: right;
            margin-right: 247px;
        }
        .rside a {
            
            width: 267px;
            height: 62px;
            border-radius: 8px;
            display: inline-block;
            color: #fff;
            text-decoration: none;
            margin: 5px 0;
            padding: auto;
            line-height: 62px;
        }
        .content {
            width: 600px;
            height: 274px;
        }
        .content .mess li {
            text-align: left;
            /* margin: auto; */
        }
        .content .mess span {
            color: #A2A2A2;
            font-size: 12px;
            text-align: right;
        }
        .content .mess a {
            display: inline-block;
            line-height: 40px;
            color: #222222;
            font-size: 15px;
            text-decoration: none;
        }
        .content .mess a:hover {
            color: brown;
        }
    </style>

</head>
<body>
    <div class="header" >
        <img src="./img2.png" alt="" width="1158" height="140">
        <div class="search">
            <input type="text" placeholder="请输入关键字">
            <button>搜索</button>
            <!-- <div class="clearfix"></div> -->
        </div>
    </div>
    
    <div class="main">
        
        <div class="nav">
            <a href="#">首页</a>
            <a href="#">学校概况</a>
            <a href="#">学院动态</a>
            <a href="#">校资队伍</a>
            <a href="#">本科生培养</a>
            <a href="#">研究生培养</a>
            <a href="#">学科建设</a>
            <a href="#">科学研究</a>
            <a href="#">党建工作</a>
            <a href="#">学生工作</a>
            <a href="#">教工之家</a>
        </div>
        <!-- <div class="container">
            <div class="loop">
                <div class="item"><img src="./img1.2.png" alt=""></div>
                <div class="item"><img src="./img1.1.png" alt=""></div>
                <div class="item"><img src="./img1.3.png" alt=""></div>
        </div> -->
        <div class="container">
            <div class="box1">
                <div class="box">
                    <img src="./img1.1.png" width="1200" height="360"  alt="">
                    <img src="./img1.2.png" width="1200" height="360" alt="">
                    <img src="./img1.3.png" width="1200" height="360" alt="">
                    <img src="./img1.1.png" width="1200" height="360"  alt="">
                     <div class="clearfix"></div>
                </div>
            </div>
            <div class="message">
                <img src="./news.png" width="1196" height="34" alt="">
            </div>
            <div class="news">
                <div class="lside">
                    <div class="box2">
                        <div class="boxx">
                            <img src="./nimg1.png" width="420" height="276" alt="">
                            <img src="./nimg2.png" width="420" height="276" alt="">
                            <img src="./nimg3.png" width="420" height="276" alt="">
                            <img src="./nimg4.png" width="420" height="276" alt="">
                            <img src="./nimg5.png" width="420" height="276" alt="">
                            <img src="./nimg1.png" width="420" height="276" alt="">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="rside">
                    <a href="https://it.ctgu.edu.cn/xygz.htm" style="background-color: #105999;">学院工作</a>
                    <a href="#" style="background-color: #8e2562;">院长邮箱</a>
                    <a href="https://sxdxsec.ctgu.edu.cn/" style="background-color: #058f99;">软件中心</a>
                    <a href="https://it.ctgu.edu.cn/xzzx.htm" style="background-color: #1b7dd7;">下载中心</a>
                    <div class="clearfix"></div>
                </div>
                <div class="content">
                    <div class="mess">
                        <ul>
                            <li><a href="https://it.ctgu.edu.cn/info/1070/10865.htm">“研”途有我丨我院举行2024届考研学生复试指...</a><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 03-06</span></li>
                            <hr>
                            <li><a href="https://it.ctgu.edu.cn/info/1070/10859.htm"> 上好 “开学第一课”——计算机与信息学院开学第...</a><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 03-04</span></li>
                            <hr>
                            <li><a href="https://it.ctgu.edu.cn/info/1070/10858.htm" > 计算机与信息学院召开2024年春季学期三全...</a><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 03-01</span></li>
                            <hr>
                            <li><a href="https://it.ctgu.edu.cn/info/1070/10810.htm"> 我校电子信息硕士学位授权点全票通过专项核验</a><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 01-25</span></li>
                            <hr>
                            <li><a href="https://it.ctgu.edu.cn/info/1070/10780.htm"> 计算机与信息学院召开2021级考研就业动员大会</a><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 01-09</span></li>
                            <hr>
                            <li><a href="https://it.ctgu.edu.cn/info/1070/10762.htm"> 我院开展“感受艺术魅力 弘扬时代精神”主题美育...</a><span>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; 01-04</span></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
        

        <div class="foot">

        </div>
    </div>
</body>
</html>
